﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Mapparola</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--<link href="Styles/bootstrap.css" type="text/css" rel="stylesheet" />-->
    <link href="Styles/font-awesome.min.css" rel="stylesheet" />
    <link href="Styles/jquery.mobile-1.4.2.css" rel="stylesheet" />
    <link href="Styles/leaflet.css" rel="stylesheet" />
    <link href="Styles/markerCluster.Default.css" rel="stylesheet" />
    <link href="Styles/app.css" type="text/css" rel="stylesheet" />

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="Scripts/pubsub.js"></script>
    <script src="Scripts/knockout-3.2.0.debug.js"></script>
    <script src="Scripts/jquery-2.1.1.js"></script>
    <script src="Scripts/jquery-ui-1.11.2.js"></script>
    <script src="Scripts/jquery.mobile-1.4.2.js"></script>
    <script src="Scripts/geo.js"></script>
    <script src="Scripts/moment.js"></script>
    <script src="Scripts/leaflet-0.7.3.js"></script>
    <script src="Scripts/leaflet.markercluster-src.js"></script>

    <script src="Scripts/mapparolaCore.js"></script>
    <script src="Scripts/mapparolaCoreClient.js"></script>S

    <script src="app.js"></script>
</head>

<body>

    <div id="main" data-position="fixed" data-role="page">
        <!--Panel-->
        <div data-role="panel" id="panel" class="panel" data-display="overlay">
            <!--  -->
            <!--  -->
            <!--Start of fav page-->
            <div id="discussion-view" class="view inactive">
                <div class="msg-container">
                    <div class="parent-message" data-bind="with: discussion">
                        <span class="message-text" data-bind="text: OText"></span>

                        <ul data-bind="foreach: {data: OResponses, as: 'response'}">
                            <li class="response">
                                <span class="response-text" data-bind="text: response.OText"></span>
                            </li>
                        </ul>
                    </div>

                    <div class="new-message-container">
                        <div class="message-opener-container" data-bind="css: { closed: !msgEditorIsOpened()}">
                            <span class=" message-opener fa fa-bars" data-bind="click: $root.ToggleMsgEditorVisibility">
                            </span>
                            <div class="message-editor" contenteditable="true" data-bind="editableText: newMsgText"></div>
                            <div class="message-editor-options">
                                <div class="message-pin">
                                    Pin
                                    <input class="pin-selector" type="checkbox" data-role="none" data-bind="checked: isPinned" />
                                </div>
                                <div class="message-sender ui-corner-all ui-btn" data-bind="click: $root.SendNewMessage">Send</div>
                            </div>
                        </div>
                    </div>
                    <!--End of new message container-->
                </div>
                <!--End of msg container-->
            </div>
            <!--End of fav page-->
        </div>
        <!--End of panel-->
        <!--  -->
        <!--Header-->
        <div class="ui-header header" data-role="header" data-tap-toggle="false" data-position="fixed">
            <h1 class="app-title">Mapparola</h1>
            <a class="panel-handler fa fa-bars" href="#panel"></a>

            <a class="fav-handler fa fa-star" data-bind="click: ClickOnFavHandler.bind($root)"></a>
        </div>
        <!--  -->

        <div class="ui-content" data-role="content">
            <!--Start of login page-->
            <div id="login-view" class="view inactive">

                <span>User:</span>
                <input class="user-field" type="email" placeholder="Enter your username" data-bind="value:username" />
                <input class="pass-field" type="password" placeholder="Enter your password" data-bind="value:password" />

                <a class="login-button ui-corner-all ui-btn" data-bind="click: $root.Login">Login</a>
            </div>
            <!--End of login page-->
            <!--Start of live feed page-->
            <div id="live-view" class="view inactive">
                <div class="map-container">
                    <div class="map" id="map"></div>

                    <div class="map-resizer">
                        <div class="map-handler fa fa-arrows-v"></div>
                    </div>
                </div>

                <div class="msg-container">
                    <ul class="messages list clear" data-bind="foreach: { data: discussions, as: 'discussion' }">
                        <li class="message" data-bind="css:{multi: discussion.OResponses().length > 0, favorited: discussion.OFavorited}">
                            <span class="message-text" data-bind="text: discussion.OText, click: $root.PanToDiscussion.bind($root), event: { dblclick: $root.FavoriteDiscussion.bind($root)}"></span>

                            <span class="discussion-icon fa fa-comments-o" data-bind="click: $root.ShowDiscussion.bind($root)"></span>
                            <!--<ul data-bind="foreach: {data: OResponses, as: 'response'}">
                                <li class="response">
                                    <span class="response-text" data-bind="text: response.OText"></span>
                                </li>
                            </ul>-->
                        </li>
                    </ul>
                    <div class="new-message-container" data-bind="css: { closed: !msgEditorIsOpened()}">
                        <div class="message-opener-container">
                            <span class="message-opener fa fa-bars" data-bind="click: $root.ToggleMsgEditorVisibility">
                            </span>
                            <div class="message-editor" contenteditable="true" data-bind="editableText: newMsgText"></div>
                            <div class="message-editor-options">
                                <div class="message-pin">
                                    Pin
                                    <input class="pin-selector" type="checkbox" data-role="none" data-bind="checked: isPinned" />
                                </div>
                                <div class="message-sender ui-corner-all ui-btn" data-bind="click: $root.SendNewMessage">Send</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--End of live feed page-->
        </div>
        <div class="ui-footer" data-role="footer" data-tap-toggle="false" data-position="fixed">Footer</div>
    </div>
</body>
</html>
